<template>
    <div class="content-edit">

        <el-form :model="info" label-width="120px" style="max-width: 560px">
            <el-form-item label="父导航">
                <span v-if="info.parent">{{ info.parent.title }}</span>
                <span v-if="!info.parent">无</span>

            </el-form-item>
            <el-form-item label="名称">
                <el-input class="w-50" v-model="info.title" />
            </el-form-item>

            <el-form-item label="链接">
                <el-input class="w-50" v-model="info.link" />
            </el-form-item>
            <!--
            <el-form-item label="上级导航">

                <el-autocomplete
                    v-model="info.path"
                    :fetch-suggestions="querySearch"
                    clearable
                    class="inline-input w-50"
                    placeholder="请选择上级导航"
                    value-key="cat_name"
                    @select="parentnavSelect"
                />
                
            </el-form-item>
        -->
            <!--
            <el-form-item label="图片">
                <el-upload
                    class="avatar-uploader"
                    :action="VITE_URL + '/admin.fileUpload/upload2'"
                    :show-file-list="false"
                    :on-success="uploadSuccess"
                >
                    <img v-if="info.image" :src="VITE_URL + '/storage/' + info.image" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
        -->
            <el-form-item label="底部显示">
                <el-switch v-model="info.bottom" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="排序">
                <el-input-number v-model="info.sort_order" :min="0" />
            </el-form-item>

            <el-form-item label="状态">
                <!-- <el-select v-model="info.status" placeholder="选择状态">
                    <el-option label="启用" :value="1" />
                    <el-option label="禁用" :value="0" />
                </el-select> -->
                <el-switch v-model="info.status" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="do_edit">保存</el-button>
            </el-form-item>


        </el-form>
    </div>
</template>

<script setup lang="ts">

import { ref } from 'vue';
import axios from 'axios';
import { Plus } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const VITE_URL = window.VITE_URL;
const route = useRoute();
const router = useRouter();

const info: any = ref<object>({

    sort_order: '',
    status: '',
    id: 0,

    title: '',
    link: '',
    pid: '',
    parent: null,

});

// const navList:any = ref<Array<object>>([])

const querySearch = (queryString: string, callback: (arg: any) => void) => {

    var url = VITE_URL + '/admin.cms.nav/search';

    url += '?filter=' + queryString;

    axios.get(url).then(function (res) {

        callback(res.data)

    });

}

const single = function () {

    var url = VITE_URL + '/admin.cms.nav/single';

    url += '?id=' + info.value.id;
    axios.get(url).then((res: any) => {

        info.value = res.data;

    });
}
const get_parent = function () {

    var url = VITE_URL + '/admin.cms.nav/single';

    url += '?id=' + info.value.pid;
    axios.get(url).then((res: any) => {

        info.value.parent = res.data;

    });
}
const init = () => {

    info.value.id = route.params.id ? route.params.id : 0;
    info.value.pid = route.params.parent_id ? route.params.parent_id : 0;

    if (info.value.id) {
        single();
    }
    // 
    else if (info.value.pid) {
        get_parent();
    }

}

init();

const do_edit = () => {

    var url = VITE_URL + '/admin.cms.nav/edit';
    url += '?id=' + info.value.id;

    var data: any = {
        title: info.value.title,
        link: info.value.link,
        sort_order: info.value.sort_order,
        status: info.value.status,
        pid: info.value.pid,
        bottom: info.value.bottom,

    };

    var data_str = '';
    for (var p in data) {
        data_str += p + '=' + data[p] + '&';
    }

    axios.post(url, data_str).then(function (res) {

        if (res.data.code == 0) {

            ElMessage({
                message: '保存成功',
                type: !res.data.code ? 'success' : 'error',
                duration: 1000,
                onClose: function () {
                    router.push({ path: '/main/cms/nav' });

                }
            })
        }

    });

}

// const parentnavSelect = (selected) => {

//     // console.log( selected )
//     info.value.parent_id = selected.id;

// }

const uploadSuccess = (res: any) => {

    console.log(res)

    info.value.image = res;



}
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>